<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="big-box">
					<div class="sign-box">
						<span class="jiu-font32-fff">连续签到21天，领专属数藏</span>
						<div style="display: flex;flex-wrap: wrap;">
							<div class="num-box" v-for="item,index in 21">
								
								<block v-if="signPrizeList[index+1]">
									<div class="get-box" v-if="signPrizeList[index+1].info.type == 'integral'">
										<image src="../../../static/img/gashaponImg/stone.png" mode="aspectFill" style="width: 3.2vw;height: 3.2vw;margin-right: 0.53vw;"></image>
										<span style="font-size: 2.93vw;font-weight: 500;color: #A972FF;">{{ signPrizeList[index+1].info.count }}</span>
										<div class="arrow-bottom"></div>
									</div>
								</block>
								
								<block v-if="signPrizeList[index+1]">
									<!-- 'collection' || signPrizeList[index+1].type == 'debris' || signPrizeList[index+1].type == 'wallet' || signPrizeList[index+1].type == 'blind_box' -->
									<div class="get-box" v-if="signPrizeList[index+1].info.type == 'collection' " style="right: -4vw;">
										<image src="../../../static/img/tabbar/index1.png" mode="aspectFill" style="width: 3.2vw;height: 3.2vw;margin-right: 0.53vw;"></image>
										<span style="font-size: 2.93vw;font-weight: 500;color: #FFCE80;">数藏</span>
										<div class="arrow-bottom" style="left: 50%;"></div>
									</div>
									<div class="get-box" v-if="signPrizeList[index+1].info.type == 'coupon' " style="right: -4vw;">
										<image src="../../../static/img/tabbar/index1.png" mode="aspectFill" style="width: 3.2vw;height: 3.2vw;margin-right: 0.53vw;"></image>
										<span style="font-size: 2.93vw;font-weight: 500;color: #FFCE80;">优惠券</span>
										<div class="arrow-bottom" style="left: 50%;"></div>
									</div>
									<div class="get-box" v-if="signPrizeList[index+1].info.type == 'debris' " style="right: -4vw;">
										<image src="../../../static/img/tabbar/index1.png" mode="aspectFill" style="width: 3.2vw;height: 3.2vw;margin-right: 0.53vw;"></image>
										<span style="font-size: 2.93vw;font-weight: 500;color: #FFCE80;">材料</span>
										<div class="arrow-bottom" style="left: 50%;"></div>
									</div>
								</block>
								
								<!-- <div class="get-box">
									<image src="../../../static/img/gashaponImg/stone.png" mode="aspectFill" style="width: 3.2vw;height: 3.2vw;margin-right: 0.53vw;"></image>
									<span style="font-size: 2.93vw;font-weight: 500;color: #A972FF;">3</span>
								</div> -->
								<div style="display: flex;align-items: center;">
									<span class="line" style="width: 10.67vw;height: 1px;" :class="{'signLine':index+1<=singInfo.continuous }" v-if="index != 0 && index!= 7 && index != 14"></span>
									<span class="radius" :class="{'inDay':singInfo.continuous >= index+1}"></span>
								</div>
								<span class="day" :class="{'inDay':singInfo.continuous >= index+1}">{{ index+1 }}</span>
							</div>
						</div>
						
						<div class="sign-btn" @tap="onSignIn" :class="[singInfo.todaySign == 0 ? 'sign0' : 'sign1' ]">{{ singInfo.todaySign == 0 ? '立即签到' : '已签到' }}</div>
						
						<div class="sign-text">已连续签到{{ singInfo.continuous }}天</div>
					</div>
				</div>
				<div class="tips-box">
					<image src="../../../static/img/zhuyi.png" mode="aspectFill" class="image427"></image>
					<div class="tips-text">
						<span>1.每日签到可领取1积分；</span>
						<span>2.每21天为一个签到周期： 连续签到的第3、7、14天分别可获得3积分、7积分、14积分；第21天可获得平台IP专属隐藏款数藏；</span>
						<span>3.每个周期可领取的数藏不重复，后续会陆续公布签到领数藏活动的权益和玩法。</span>
					</div>
				</div>
			</ma-refresh>
		</ma-body>
		<getStoneCard ref="getStone"></getStoneCard>
		<productModal ref="product"></productModal>
	</div>
</template>

<script>
	import getStoneCard from '@/subPackB/components/getStone-card/getStone-card';
	import productModal from '@/subPackA/components/product-modal/product-modal';
	export default{
		components: {
			getStoneCard,
			productModal
		},
		data(){
			return{
				num: 7,
				singInfo: {}, //获取用户签到信息
				signPrizeList: {},
				productInfo: {}
			}
		},
		methods:{
			onSignIn(){
				if(this.singInfo.todaySign == 1) return;
				
				this.$u.api.onSignLog().then(res=>{
					console.log('6666666666666',res)
					setTimeout(()=>{
						this.getSignInfo();
					},800)
					if(res == null) return;
					if(res.info.type == "collection" || res.info.type == "debris"){
						this.productInfo = res;
						let obj = res.productSpuAggr;
						setTimeout(()=>{
							this.$refs.product.open({
								obj,
								success: async () => {
									let id;
									if(this.productInfo.info.type == "collection") id = 0;
									else id = 1;
									uni.showToast({
										icon: 'none',
										title: '跳转中，请稍后'
									})
									setTimeout(()=>{
										this.$ma.route.myCollection({
											currentIndex: id
										})
									},4000)
								}
							});
						},1000)
					}else{
						let obj = res.info;
						this.$refs.getStone.open({
							 obj,
							 success: async()=>{
								 this.$ma.route.stoneDetail()
							 }
						})
					}
				})
			},
			// 获取用户签到对象
			async getSignInfo(){
				let res = await this.$u.api.getSignInfo();
				this.singInfo = res;
			},
			// 获取签到礼物
			async getSignPrizeList(){
				let res = await this.$u.api.getSignPrizeList();
				this.signPrizeList = res;
			}
		},
		onLoad(){
			this.getSignInfo();
			this.getSignPrizeList();
		}
	}
</script>

<style lang="scss">
	
	.arrow-bottom {
	  width: 0;   
	  height: 0;   
	  border-left: 4px solid transparent;  /* 左边框的宽 */  
	  border-right: 4px solid transparent; /* 右边框的宽 */  
	  border-top: 7px solid #323232; /* 下边框的长度|高,以及背景色 */  
	  font-size: 0;  
	  line-height: 0;
	  position: absolute;
	  bottom: -1.5vw;
	  left: 4.5vw;
	}
	
	.image427{
		width: 4.27vw;
		height: 4.27vw;
		flex-shrink: 0;
		margin-right: 1.07vw;
	}
	.line{
		background-color: #292929;
	}
	.signLine{
		background-color: #FFCE80;
	}
	.big-box{
		display: flex;
		padding: 0 4.27vw;
	}
	.sign-box{
		margin-top: 6.4vw;
		background-color: #1b1b1b;
		border-radius: 6.4vw;
		padding: 10.67vw 4.33vw 6.4vw 6.4vw;
		width: 100%;
		
		.num-box{
			display: flex;
			flex-direction: column;
			align-items: end;
			position: relative;
			margin-top: 14.67vw;
			
			.get-box{
				display: flex;
				align-items: center;
				border-radius: 1.07vw;
				background-color: #323232;
				padding: 0 1.07vw;
				line-height: 5.33vw;
				width: max-content;
				position: absolute;
				top: -8vw;
				right: -4.3vw;
			}
			.radius{
				width: 2.13vw;
				height: 2.13vw;
				border-radius: 50%;
				background-color: #555555;
			}
			.day{
				font-size: 3.2vw;
				font-weight: 300;
				color: #555555;
				display: contents;
			}
			.inDay{
				background-color: #FFCE80;
				color: #FFCE80;
			}
		}
	
		.sign-btn{
			width: 78.67vw;
			line-height: 12.8vw;
			text-align: center;
			border-radius: 6.4vw;
			margin-top: 10.67vw;
			font-size: 3.73vw;
			font-weight: 500;
		}
		
		.sign0{
			background-color: #A972FF;
			box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.48);
			color: #000;
		}
		.sign1{
			background: #555555;
			color: #bbb;
		}

		.sign-text{
			color: #A972FF;
			font-size: 3.2vw;
			font-weight: 300;
			text-align: center;
			margin-top: 2.13vw;
		}
	}

	.tips-box{
		display: flex;
		padding: 0 5.33vw;
		padding-left: 6.4vw;
		margin-top: 4.27vw;
		.tips-text{
			font-size: 3.2vw;
			font-weight: 300;
			color: #ff9e3e;
			display: flex;
			flex-direction: column;
		}
	}
</style>